import QtQuick 2.0
import QtQuick.Controls 2.5
import QtQuick.Controls.impl 2.12
import QtGraphicalEffects 1.15
import SvgImage 1.0

ComboBox {
    id: root
    currentIndex: 0
    hoverEnabled: true
    opacity: enabled ? 1 : 0.5
    property int _radius: 4
    property int _itemHeight: 24
    property int dropViewMaxH: 200

    property color _normal_color: "transparent"
    property color _hover_color: "#E5E5E5"
    property color _checked_color: "#e0eaff"

    onCurrentIndexChanged: {
        listView.currentIndex = currentIndex;
    }

    //the background of the combobox
    background: Rectangle {
        color: "transparent"
        radius: _radius
        clip: true
        border.width: 1
        border.color: {
            if( comboPopup.visible ) { return "#3986FF" }
            else if( root.hovered ){ return "#80B0FF" }
            else { return "#D9D9D9" }
        }
    }

    //the text in the combobox
    contentItem: Text {
        text: root.displayText
        font.pixelSize: 13
        color: "#4d4d4d"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignLeft
        anchors.left: parent.left
        anchors.right: root.indicator.left
        elide: Text.ElideRight
        anchors.leftMargin: 5
    }

    //items
    delegate: ItemDelegate {
        id: itemDlgt
        width: root.width
        height: _itemHeight

        contentItem: Text {
            id: textItem
            text: modelData
            color: "#4D4D4D"
            font.pixelSize: 13

            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignLeft
            anchors.left: parent.left
            anchors.leftMargin: 5
        }

        background: Rectangle {
            color: {
                if( root.displayText == textItem.text ){
                    return _checked_color
                } else if( itemDlgt.hovered ){
                    return "#E5E5E5"
                }else {
                    return "transparent"
                }
            }
        }
    }

    //下拉按钮图标
    indicator: Rectangle{
        width: 20
        height: 14
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        anchors.rightMargin: 5
        color: "transparent"

        SvgImage {
            anchors.fill: parent
            source: "qrc:/image_res/assets/image_res/icon_arrow_down_normal.svg"
        }
    }

    //the list of elements and their style when the combobox is open
    popup: Popup {
        id: comboPopup
        y: root.height + 5
        width: root.width
        height: {
            if( listView.count < 6 ){
                return listView.count * 24 + _radius * 2
            }else{
                return 6 * 24 + _radius * 2
            }
        }
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
        padding: 0

        background: Rectangle {
            radius: _radius
            border.width: 1
            border.color: "#D9D9D9"

            layer.enabled: true
            layer.effect: DropShadow {
                horizontalOffset: 2
                verticalOffset: 3
                color: "#30000000"
                samples: 12
                //radius: 2
            }

            ListView {
                id: listView
                y: _radius
                anchors.fill: parent
                anchors.topMargin: _radius
                anchors.bottomMargin: _radius
                anchors.leftMargin: 1
                anchors.rightMargin: 1
                model: root.popup.visible ? root.delegateModel : null
                clip: true

                ScrollBar.vertical: ScrollBar {
                    id: vSrollBar
                    policy: root.delegateModel.count > 6 ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff

                    contentItem: Rectangle {
                        implicitWidth: 6
                        radius: width / 2
                        color: "lightgray"
                    }
                }
            }
        }
    }
}





















